<template>
  <!-- 添加产品 -->
  <div class="add-product">
    <a-modal title="添加产品" :visible="props.show" @ok="handleOK" @cancel="close">
      <a-form :label-col="{span:6}" :wrapper-col="{span:12}">
        <a-form-item label="产品名称">
          <a-input v-model:value="addForm.name" />
        </a-form-item>
        <a-form-item label="价格">
          <a-input v-model:value="addForm.price" />
        </a-form-item>
        <a-form-item label="著作者">
          <a-input v-model:value="addForm.author" />
        </a-form-item>
        <a-form-item label="上架日期">
          <a-date-picker v-model:value="addForm.publishDate" />
        </a-form-item>
        <a-form-item label="类别">
          <a-input v-model:value="addForm.classify" />
        </a-form-item>
      </a-form>

    </a-modal>
  </div>
</template>

<script>
import { defineComponent, reactive } from "vue";
import { product } from "../../../service";
import { result, deepClone } from "@/utils/result";
import { message } from "ant-design-vue";
const formData = {
  name: "",
  price: 0,
  author: "",
  publishDate: "",
  classify: "",
};
export default defineComponent({
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    console.log("props", props);
    //表单默认数据
    const addForm = reactive(deepClone(formData));

    const handleOK = async () => {
      const form = deepClone(addForm); //深拷贝一个对象出来
      form.publishDate = addForm.publishDate.valueOf(); //时间设置为时间戳格式
      //   console.log("打印addForm值", addForm);
      const res = await product.add(form);
      result(res).success((val, { data }) => {
        //清空表单数据
        Object.assign(addForm, formData); //assign合并 将formData中数据合并到addForm对象
        message.success(data.msg);
      });
    };

    const close = () => {
      // context.emit("setShow", false);
      context.emit('update:show',false)
    };
    return {
      addForm,
      handleOK,

      props,
      close,
    };
  },
});
</script>

<style lang='less'>
</style>